<!DOCTYPE html>
<html lang="en">
<head>
    {% include 'zbook/common/header.html' %}
    <title>首页</title>
    <!-- 添加代码高亮样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <style>
        body {
            font-family: 'Roboto', sans-serif; /* Custom font */
        }
        #chat-container {
            animation: fadeIn 1s ease-in-out; /* Fade-in animation */
        }
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        /* Example typing indicator style */
        #typing-indicator {
            display: none;
            margin-bottom: 10px;
        }
        #typing-indicator span {
            display: inline-block;
            width: 7px;
            height: 7px;
            background-color: #007bff;
            border-radius: 50%;
            margin-right: 4px;
            animation: typing 1s infinite ease-in-out;
        }
        @keyframes typing {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
        think {
            background-color: #eee;
            display: block;
            font-size: small;
            color: #666;
            padding: 15px;
            border-radius: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    {% include 'zbook/common/topbar.html' %}
    <div class="container mt-5">
        <h1 class="text-center mb-4">Chatbot</h1>
        <div id="chat-container">
            <div id="chat-history" class="mb-3"></div>
            <form id="chat-form">
                <div class="input-group">
                    <input type="text" id="user-input" class="form-control" placeholder="Ask about your Dog Care!" required>
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="/static/zbook/js/jquery-1.10.1.min.js"></script>
    <script src="/static/zbook/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#chat-form").submit(function (event) {
                event.preventDefault();
                let userInput = $("#user-input").val().trim();
                if (userInput !== "") {
                    $("#chat-history").append(`
                        <div class="text-right mb-2">
                            <div class="badge badge-primary p-2">You</div>
                            <div class="bg-light rounded p-2">${userInput}</div>
                        </div>
                    `);
                    $("#user-input").val("");

                    $.ajax({
                        url: "/ask",
                        type: "POST",
                        data: { user_input: userInput },
                        success: function (response) {
                            $("#chat-history").append(`
                                <div class="text-left mb-2">
                                    <div class="badge badge-secondary p-2">AI</div>
                                    <div class="bg-light rounded p-2">${response.answer}</div>
                                </div>
                            `);
                        },
                        error: function () {
                            alert("Error processing your request.");
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>